
<template>
<div class="rate detailedParent">
  <div class="detailed"><img src="../../../public/detailed.svg" alt="放大" @click="dialogVisible = true"></div>
  <div id="rate-main"></div>
</div>
  <el-dialog v-model="dialogVisible" title="图表详情" width="80vw" height="height">
    <div>
      <DetailedRate></DetailedRate>
    </div>
  </el-dialog>
</template>

<style scoped>
.rate{
  width: 100%;
  height: 100%;
}

#rate-main{
  width: 100%;
  height: 100%;
}
</style>

<script setup>

import {onMounted, ref} from "vue";
import * as echarts from 'echarts';
import {getRate, getRateByProvinceName} from "@/api/rate.js";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import {detailedRateEvent, mapChanged} from "@/consts/eventName.js";
import emitter from "@/utils/emitter.js";
import DetailedRate from "@/components/DemographicCharacteristics/detailed/DetailedRate.vue";
import theme from "../../../static/theme/walden.json"


let chartDom
let myChart
let option

let dialogVisible = ref(false)

// 挂载图像
onMounted(()=>{
  chartDom = document.getElementById('rate-main');
  myChart = echarts.init(chartDom,theme);
  getChinaRate()
})

// 接收改变的省份
emitter.on(mapChanged,(value)=>{
  console.log("rate:mapChanged ===> "+value)
  let data
  let detailedStore
  if (value === "china"){
    getChinaRate()
  }else {
    getRateByProvinceName(value).then((value)=>{
      data = createValue(value.data)
      console.log(value.data)
      detailedStore = useDetailedStore()
      if (detailedStore.detailedLoadFlag.get(detailedRateEvent)){
        console.log("发送 emitter ",data)
        emitter.emit(detailedRateEvent,data)
      }else {
        console.log("Rate 存储 数据",data)
        detailedStore.detailedData.set(detailedRateEvent,data)
      }

      option = createOption(data)

      option && myChart.setOption(option);
    })
  }
})

// 获取全国的变化率
function getChinaRate(){
  getRateByProvinceName("china").then((value)=>{
    let data = value.data
    let detailedStore = useDetailedStore()
    let rateData = createValue(data);
    if (detailedStore.detailedLoadFlag.get(detailedRateEvent)){
      emitter.emit(detailedRateEvent,rateData)
    }else {
      detailedStore.detailedData.set(detailedRateEvent,rateData)
    }
    return rateData
  }).then((value)=>{
    console.log("出生率，死亡率，自然增长率的数据",value)
    option = createOption(value);
    option && myChart.setOption(option);
  })
}

// 创建option
function createOption(value){
  return {
    title: {
      text: '出生率，死亡率，自然增长率',
      textStyle: {
        fontSize:15 // 设置标题字体大小
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: value.xAxisData
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        name: '出生率',
        type: 'line',
        stack: 'Total',
        data: value.birthrate
      },
      {
        name: '死亡率',
        type: 'line',
        stack: 'Total',
        data: value.mortality
      },
      {
        name: '自然增长率',
        type: 'line',
        stack: 'Total',
        data: value.naturalGrowthRate
      },
    ]
  };
}

function createValue(data){
  let xAxisData = []
  let birthrate = []
  let mortality = []
  let naturalGrowthRate = []


  data.forEach((item)=>{
    const jsonMap = new Map(Object.entries(item));
    xAxisData.push(jsonMap.keys().next().value)
    let arr = jsonMap.values().next().value
    birthrate.push(arr[0])
    mortality.push(arr[1])
    naturalGrowthRate.push(arr[2])
  })

  return {
    xAxisData: xAxisData.reverse(),
    birthrate: birthrate.reverse(),
    mortality: mortality.reverse(),
    naturalGrowthRate: naturalGrowthRate.reverse()
  }
}

</script>